import React, { useEffect, useState } from 'react';
import {
  Table,
  Tag,
  Space,
  Select,
  Input,
  Form,
  DatePicker,
  Button,
  Pagination,
  Popconfirm,
  message,
  Spin,
} from 'antd';
import { history } from 'umi';
import request from '../../../http';
import './index.css';

const { Option } = Select;
const { RangePicker } = DatePicker;

const Absence = () => {
  const columns = [
    {
      title: '申请提交日期',
      dataIndex: '申请提交日期',
      key: '申请提交日期',
    },
    {
      title: '主题',
      dataIndex: '主题',
      key: '主题',
    },
    {
      title: '请假原因',
      key: '请假原因',
      render: (record) => {
        if (record.reason == '病假') {
          return <span>病假</span>;
        } else if (record.reason == '事假') {
          return <span>事假</span>;
        } else {
          return <span>其他</span>;
        }
      },
    },
    {
      title: '原因说明',
      dataIndex: '原因说明',
      key: '原因说明',
    },
    {
      title: '请假开始时间',
      dataIndex: '请假开始时间',
      key: '请假开始时间',
    },
    {
      title: '请假结束时间',
      dataIndex: '请假结束时间',
      key: '请假结束时间',
    },
    {
      title: '审批状态',
      dataIndex: '审批状态',
      key: '审批状态',
    },
    {
      title: '操作',
      key: '操作',
      render: (record) => {
        if (record.state == '审批不通过') {
          return (
            <div>
              <a
                onClick={() =>
                  serchImformation(
                    record.state,
                    record.theme,
                    record.reason1,
                    record.startDateTime,
                    record.endDateTime,
                    record.explain,
                  )
                }
              >
                查看详情
              </a>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <a
                onClick={() =>
                  addLeaveApplication(
                    record.state,
                    record.theme,
                    record.reason1,
                    record.startDateTime,
                    record.endDateTime,
                    record.explain,
                  )
                }
              >
                编辑
              </a>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              {/* <a onClick={serchReason}>不通过原因</a> */}
              <Popconfirm title={record.explain}>
                <a href="#">不通过原因</a>
              </Popconfirm>
            </div>
          );
        } else if (record.state == '审批中') {
          return (
            <a
              onClick={() =>
                serchImformation(
                  record.state,
                  record.theme,
                  record.reason,
                  record.startDateTime,
                  record.endDateTime,
                  record.explain,
                )
              }
            >
              查看详情
            </a>
          );
        } else {
          return (
            <a
              onClick={() =>
                serchImformation(
                  record.state,
                  record.theme,
                  record.reason,
                  record.startDateTime,
                  record.endDateTime,
                  record.explain,
                )
              }
            >
              查看详情
            </a>
          );
        }
      },
    },
  ];

  //表格数据
  const [data, setdata] = useState([{}]);
  //接收的分页数
  const [sum, setsum] = useState(1);
  const [sumPage, setsumPage] = useState(1);
  ///判断分页搜索
  const [pagination, setpagination] = useState('false');
  const [pagination1, setpagination1] = useState('true');
  //请假原因
  const [reason, setreason] = useState([{}]);
  //审批状态
  const [state, setstate] = useState([{}]);
  //获取下拉或输入的值
  const [Sdate, setSdate] = useState('');
  const [State, setState] = useState(0);
  const [Sreason, setSreason] = useState(0);
  const [Szhuti, setSzhuti] = useState('');

  //加载
  const [loading, setloading] = useState(0);

  //全局搜素
  useEffect(() => {
    //学生请假查询
    request
      .post('/ack/student/QueryForLeaveInfoCondition', {
        number: 10,
        page: 1,
      })
      .then((res) => {
        console.log('student/absence-表格请求成功', res);
        setloading(1);
        const p = res.data.returnDate;
        const newP = p.map((dataObj) => {
          return {
            申请提交日期: dataObj.submissionDate,
            主题: dataObj.theme,
            请假原因: dataObj.reason,
            原因说明: dataObj.explain,
            请假开始时间: dataObj.startDateTime,
            请假结束时间: dataObj.endDateTime,
            审批状态: dataObj.state,
            reason1: dataObj.reason,
            state: dataObj.state,
            theme: dataObj.theme,
            startDateTime: dataObj.startDateTime,
            endDateTime: dataObj.endDateTime,
            explain: dataObj.explain,
          };
        });
        setdata(newP);
        setsum(res.data.paginationData.sum);
        setsumPage(res.data.paginationData.sumPage);
      })
      .catch((err) => {
        console.log('student/absence-表格请求失败了', err);
      });

    //请假原因
    request
      .get('/ask/TeacherLeaveReason')
      .then((res) => {
        // console.log("请假原因请求成功", res.data)
        const reason1 = res.data;
        setreason(reason1);
      })
      .catch((err) => {
        console.log('请假原因请求失败了', err);
      });

    //申请状态
    request
      .get('/ask/TeacherState')
      .then((res) => {
        // console.log("申请状态请求成功", res.data)
        const state1 = res.data;
        setstate(state1);
      })
      .catch((err) => {
        console.log('申请状态请求失败了', err);
      });
  }, []);

  //搜索查询
  const ChaXun = () => {
    console.log(Sdate, State, Sreason, Szhuti);
    request
      .post('/ack/student/QueryForLeaveInfoCondition', {
        number: 10,
        page: 1,
        submissionDate: Sdate,
        theme: Szhuti,
        reason: Sreason,
        state: State,
      })
      .then((res) => {
        console.log('搜索查询请求成功', res);
        const p = res.data.returnDate;
        const newP = p.map((dataObj) => {
          return {
            申请提交日期: dataObj.submissionDate,
            主题: dataObj.theme,
            请假原因: dataObj.reason,
            原因说明: dataObj.explain,
            请假开始时间: dataObj.startDateTime,
            请假结束时间: dataObj.endDateTime,
            审批状态: dataObj.state,
            reason1: dataObj.reason,
            state: dataObj.state,
            theme: dataObj.theme,
            startDateTime: dataObj.startDateTime,
            endDateTime: dataObj.endDateTime,
            explain: dataObj.explain,
          };
        });
        setdata(newP);
        setsum(res.data.paginationData.sum);
        setsumPage(res.data.paginationData.sumPage);
        setpagination('true');
        setpagination1('true');
      })
      .catch(() => {
        alert('该查询没有数据!');
        setdata('');
        setsum('');
      });
  };

  //重置搜索
  const reset = () => {
    history.go(0);
    request
      .post('/ack/student/QueryForLeaveInfoCondition', {
        number: 10,
        page: 1,
      })
      .then((res) => {
        // console.log("student/absence-表格请求成功", res.data)
        const p = res.data.returnDate;
        const newP = p.map((dataObj) => {
          return {
            申请提交日期: dataObj.submissionDate,
            主题: dataObj.theme,
            请假原因: dataObj.reason,
            原因说明: dataObj.explain,
            请假开始时间: dataObj.startDateTime,
            请假结束时间: dataObj.endDateTime,
            审批状态: dataObj.state,
            reason1: dataObj.reason,
            state: dataObj.state,
            theme: dataObj.theme,
            startDateTime: dataObj.startDateTime,
            endDateTime: dataObj.endDateTime,
            explain: dataObj.explain,
          };
        });
        setdata(newP);
        setsum(res.data.paginationData.sum);
        setsumPage(res.data.paginationData.sumPage);
        setpagination('false');
      })
      .catch((err) => {
        console.log('重置请求失败了', err);
      });
  };

  //分页搜索
  const pageChange = (page, pageSize) => {
    if (pagination == 'false') {
      request
        .post('/ack/student/QueryForLeaveInfoCondition', {
          number: pageSize,
          page: page,
        })
        .then((res) => {
          // console.log("student/absence-表格请求成功", res.data)
          const p = res.data.returnDate;
          const newP = p.map((dataObj) => {
            return {
              申请提交日期: dataObj.submissionDate,
              主题: dataObj.theme,
              请假原因: dataObj.reason,
              原因说明: dataObj.explain,
              请假开始时间: dataObj.startDateTime,
              请假结束时间: dataObj.endDateTime,
              审批状态: dataObj.state,
              reason1: dataObj.reason,
              state: dataObj.state,
              theme: dataObj.theme,
              startDateTime: dataObj.startDateTime,
              endDateTime: dataObj.endDateTime,
              explain: dataObj.explain,
            };
          });
          setdata(newP);
          setsum(res.data.paginationData.sum);
          setsumPage(res.data.paginationData.sumPage);
        });
    } else if (pagination1 == 'true') {
      request
        .post('/ack/student/QueryForLeaveInfoCondition', {
          number: 10,
          page: 1,
        })
        .then((res) => {
          // console.log("student/absence-表格请求成功", res.data)
          const p = res.data.returnDate;
          const newP = p.map((dataObj) => {
            return {
              申请提交日期: dataObj.submissionDate,
              主题: dataObj.theme,
              请假原因: dataObj.reason,
              原因说明: dataObj.explain,
              请假开始时间: dataObj.startDateTime,
              请假结束时间: dataObj.endDateTime,
              审批状态: dataObj.state,
              reason1: dataObj.reason,
              state: dataObj.state,
              theme: dataObj.theme,
              startDateTime: dataObj.startDateTime,
              endDateTime: dataObj.endDateTime,
              explain: dataObj.explain,
            };
          });
          setdata(newP);
          setsum(res.data.paginationData.sum);
          setsumPage(res.data.paginationData.sumPage);
        });
    }
  };

  //查看详情
  const serchImformation = (
    state,
    reason1,
    theme,
    startDateTime,
    endDateTime,
    explain,
  ) => {
    history.push({
      pathname: '/student/absence/LeaveInformation/index',
      query: {
        state: state, //reason state theme startDateTime endDateTime  explain
        reason: reason1,
        theme: theme,
        startDateTime: startDateTime,
        endDateTime: endDateTime,
        explain: explain,
      },
    });
  };

  //选择日期回调
  const dataChange = (date, dateString) => {
    setSdate(dateString);
  };

  //新增请假
  const addLeaveApplication = (
    state,
    reason1,
    theme,
    startDateTime,
    endDateTime,
    explain,
  ) => {
    history.push({
      pathname: '/student/absence/LeaveApplication/index',
      query: {
        state: state, //reason state theme startDateTime endDateTime  explain
        reason: reason1,
        theme: theme,
        startDateTime: startDateTime,
        endDateTime: endDateTime,
        explain: explain,
      },
    });
  };

  return (
    <div>
      <Form>
        <div className="prjName" style={{ marginLeft: 30 }}>
          申请提交日期: &nbsp;&nbsp;
          <Space direction="vertical" size={12}>
            <DatePicker
              onChange={dataChange}
              style={{ width: 200 }}
              placeholder="请选择日期"
            />
          </Space>
        </div>
        <div className="groupName" style={{ marginLeft: 350, marginTop: 33 }}>
          审批状态:
          <Select
            showSearch
            style={{ width: 200 }}
            placeholder="请选择"
            className="Select"
            onChange={(e, index) => {
              // setproValue(index.value)
              setState(parseInt(index.key));
            }}
          >
            {state.map((cNameObj) => {
              return (
                <Option key={cNameObj.id} value={cNameObj.state}>
                  {cNameObj.state}
                </Option>
              );
            })}
          </Select>
        </div>
        <br />
        <br />
        <div className="prjName" style={{ marginLeft: 60, marginTop: 40 }}>
          请假原因:
          <Select
            showSearch
            style={{ width: 200 }}
            placeholder="请选择"
            className="Select"
            onChange={(e, index) => {
              // setgroValue(index.value)
              setSreason(parseInt(index.key));
            }}
          >
            {reason.map((cNameObj) => {
              return (
                <Option key={cNameObj.id} value={cNameObj.reason}>
                  {cNameObj.reason}
                </Option>
              );
            })}
          </Select>
        </div>

        <div className="groupName" style={{ marginLeft: 378, marginTop: 39 }}>
          主题:
          <Input
            onChange={(e) => setSzhuti(e.target.value)}
            placeholder="请输入主题"
            style={{
              position: 'absolute',
              width: 200,
              marginLeft: 10,
              marginTop: -3,
            }}
          />
          <div className="btn">
            <Button
              type="primary"
              style={{ padding: '5px 20px' }}
              onClick={ChaXun}
            >
              查询
            </Button>
            <Button style={{ padding: '5px 20px' }} onClick={reset}>
              重置
            </Button>
          </div>
        </div>
      </Form>
      <div className="form">
        <Button
          type="primary"
          style={{
            marginBottom: 16,
          }}
          onClick={addLeaveApplication}
        >
          新增请假
        </Button>
        {loading == 0 ? (
          <div className="example">
            <Spin size="large" />
          </div>
        ) : (
          <div>
            <Table columns={columns} dataSource={data} pagination={false} />
            <div>
              <Pagination
                total={sum}
                onChange={pageChange}
                hideOnSinglePage={true}
              />
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default Absence;
